<template>
  <div class="app-container">
    <div class="container">
      <div class="container_left" @click="handleTo('top-good-list')">
        <el-card class="box-card" shadow="hover">
          <div class="card">
            <img src="../../../assets/images/top-good.png">
            <div class="card-text">
              <div class="left_card">商品置顶</div>
<!--              <span class="left_title">免费工具</span>-->
              <div class="title">在商品专辑页为链接添加 utm 参数的方法实现置顶某个或多个商品的功能</div>
            </div>
          </div>
        </el-card>
      </div>
      <div class="container_left" @click="handleTo('tied-up-list')">
        <el-card class="box-card" shadow="hover">
          <div class="card">
            <svg-icon icon-class="tiedUp" style="width: 180px;height: 60px"></svg-icon>
            <div class="card-text">
              <div class="left_card">款式组合</div>
<!--              <span class="left_title">免费工具</span>-->
              <div class="title">对销量/浏览量高的商品进行组合，实现在组合商品的详情页中可互相跳转，有效提高转化。
              </div>
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
export default {
    name: 'design-list',
    computed: {
        siteId () {
            return this.$store.state.user.siteId;
        }
    },
    methods: {
        handleTo (name) {
            this.$router.push({name});
        }
    }
};
</script>

<style lang="scss" scoped>
.container {
  height: 260px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.container_left {
  width: 360px;
  height: 260px;
  margin: 0 0 20px 40px;
  border-radius: 5px;
  cursor: pointer;
}

.box-card {
  //  width:100%;
  height: 200px;
  padding: 20px 0 0 20px;
  line-height: 30px;
}

.card {
  display: flex;
  flex-direction: row;
  align-items: self-start;
}

.box-card img {
  height: 50px;
  width: 50px;
  color: rgb(90, 90, 90);
}

.card-text {
  margin-left: 15px;
}

.left_card {
  align-items: center;
  align-content: center;
  font-size: 18px;
  font-weight: 500;
}

.left_title {
  font-size: 14px;
  color: #30344f
}

.title {
  font-size: 14px;
  color: #7e849c
}

.container_right {
  width: 200px;
  height: 260px;
  border-radius: 5px;
  cursor: pointer;
}
</style>
